<template>
  <chart
    :option="refChartOption"
    :style="{ height: `${chartHeight}` }"
    v-bind="$attrs"
    @zrender:click="pieRenderClickHandle"
    :currentTheme="currentTheme"
  />
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, PropType, ref, watch } from 'vue';
import { Chart, SeriesDataItem } from '@/components';
import { EChartOption } from 'echarts';
import { getSimpleOption } from '../options/simple-option';
const colors = [
  '#EB5B5B',
  '#E48648',
  '#E8F252',
  '#8BDB22',
  '#23BB23',
  '#22DBC8',
  '#54C0EE',
  '#3555F7',
  '#7975F1',
  '#A15FE3',
  '#A525E3',
  '#D820D2',
  '#E63298',
];

const colorTransparent = [
  'rgba(235, 91, 91, 40%)',
  'rgba(228, 134, 72, 40%)',
  'rgba(232, 242, 82, 40%)',
  'rgba(139, 219, 34, 40%)',
  'rgba(35, 187, 35, 40%)',
  'rgba(34, 219, 200, 40%)',
  'rgba(84, 192, 238, 40%)',
  'rgba(53, 85, 247, 40%)',
  'rgba(121, 117, 241, 40%)',
  'rgba(161, 95, 227, 40%)',
  'rgba(165, 37, 227, 40%)',
  'rgba(216, 32, 210, 40%)',
  'rgba(230, 50, 152, 40%)',
];
export default defineComponent({
  props: {
    data: {
      type: Array as PropType<SeriesDataItem[]>,
      default: () => [],
    },
    height: {
      type: Number,
      default: 200,
    },
    heightType: {
      type: String,
      default: 'px',
    },
    fieldNames: {
      type: Object,
      default: () => ({
        name: 'name',
        value: 'value',
      }),
    },
    title: {
      type: String,
      default: '-',
    },
    currentTheme: {
      type: String,
      default: 'dark',
    },
  },
  emits: ['zrender:click'],
  setup(props, { emit }) {
    const option = getSimpleOption();
    const refChartOption = ref(option);
    const chartHeight = computed(() => `${props.height}${props.heightType}`);
    const setChartOption = (data: any[]) => {
      const xAxis: string[] = [];
      const seriesData: EChartOption.SeriesPie.DataObject[] = [];
      let itemIndex = 0;
      data.forEach((item, index) => {
        if (itemIndex === 13) {
          itemIndex = 0;
        }
        const name = item[props.fieldNames.name];
        const value = item[props.fieldNames.value];
        let itemStyle: any = {};
        itemStyle = {
          normal: { borderColor: colors[itemIndex], color: colorTransparent[itemIndex] },
          emphasis: { color: colors[itemIndex] },
        };
        item.label = {
          show: (function () {
            if (index < 5) {
              return true;
            } else {
              return false;
            }
          })(),
          // formatter: substringName,
          position: (function () {
            if (index < 5) {
              return 'outside';
            } else {
              return 'inside';
            }
          })(),
        };
        item.labelLine = {
          show: (function () {
            if (index < 5) {
              return true;
            } else {
              return false;
            }
          })(),
        };
        const seriesItem = {
          name,
          value,
          itemStyle,
        };
        Object.keys(item).forEach(
          o =>
            ![props.fieldNames.name, props.fieldNames.value].includes(o) &&
            (seriesItem[o] = item[o]),
        );

        xAxis.push(name);
        seriesData.push(seriesItem);
        itemIndex++;
      });

      refChartOption.value.series[0].data = seriesData;
    };

    const pieRenderClickHandle = e => {
      emit('zrender:click', e);
    };

    watch(
      () => props.data,
      () => {
        setChartOption(props.data);
      },
    );

    onMounted(() => {
      setChartOption(props.data);
    });
    return {
      chartHeight,
      refChartOption,
      setChartOption,
      pieRenderClickHandle,
    };
  },
  components: {
    Chart,
  },
});
</script>

<style lang="less" scoped>
// @import './index.less';
</style>
